<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</head>
<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <p><input type="text" v-model="msg" ></p>
        <myhead></myhead>
        <hr>
        <parent></parent>
    </div>

    <template id="parent">
        <div>
            <h2 ref="one">parent - parent - 父组件</h2>
            <p>
                <input type="text" v-model="word">
            </p>
            <p>
                count === {{count}}   <button @click="changeCount" >count add</button>
            </p>
            <button @click="changeShow">点击切换子组件</button>
            <button @click="changeChildByRef"> ref 去控制子组件 </button>
            <hr>
            <childone
                :word-done = "word"
                :count="count"
                :show="show"
                ref="child"
            ></childone>
        </div>
    </template>

    <template id="childone">
        <div>
            <h2>childone - childone - 1 - 子组件</h2>
            <p>word -== {{wordDone}}</p>
            <p>count == {{count}}</p>
            <div  :style="{width:'200px',height:'200px',color:'#fff',background:'purple',display:show?'block':'none'}" >
                我被父组件控制....
            </div>
            <p>
                <input type="text" v-model="txt" >
            </p>
        </div>
    </template>

    <script>
        Vue.component("myhead",{
            template:"<header>wh2107 - 天道酬勤 </header>"
        })

        
        Vue.component('parent',{
            template:"#parent",
            data(){
                return {
                    word:"Vue is  so easy",
                    count:2000,
                    show:true 
                }
            },
            created(){

            },
            mounted(){
                this.$refs.one.style.background="#f50"
                this.$refs.one.style.fontSize = "30px"
            },
            methods:{
                changeCount(){
                    this.count+=10;
                },
                changeShow(){
                    this.show = !this.show;
                },
                changeChildByRef(){
                    // this.$refs.child 指向当前ref实例对象的 this 
                    // this.$refs.child.txt = "越努力越幸运..."
                    this.$refs.child.change()
                }
            },
            components:{
                // 子组件
                childone:{
                    template:"#childone",
                    props:{
                        wordDone:String,
                        count:Number,
                        show:Boolean 
                    },
                    data(){
                        return {
                            txt:"今天 so happy..."
                        }
                    },
                    methods:{
                        change(){
                            this.txt = "你困了吗..."
                            console.log('2107-yyds')
                        }
                    }
                }
            }
        })

        const vm = new Vue({
            // el:"#app",
            data:{
                msg:"父子组件通信 - 父改子  ",
                flag:true 
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.msg 
            }
        }).$mount("#app")
    </script>
     <!-- 
        组件  小巧  独立  可复用  
        组件系统 
        组件组织关系  
        1. 父子组件关系
        <A> 
            <B></B>
            <C></C>
        </A>
        2. 兄弟组件关系  
        <B></B>
        <C></C>

        
        组件之间的通信  
        1. 父组件访问子组件      （父组件修改子组件）
        a. props  必须动态props 父组件修改自身的变量  把变化的值传入 子组件  子组件接收动态props 
        b. refs   指向这个子组件对象    
        c. 事件总线 (bus new Vue)
        d. events 事件   (emit on )
        e. vuex (最后一天) 

        2. 子组件访问父组件
        
        3. 兄弟组件之间的通信


        refs   this.$refs  
        1. 绑定到标签  指的当前的真实DOM 
        2. 绑定到组件  指的是当前的组件对象  直接修改组件内的变量  直接调用组件内部的函数 
    -->
</body>
</html>